<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title>Layabox</title>
		<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./assets/css/animate.min.css" />
		<link rel="stylesheet/less" href="./assets/css/reset.less" />
		<link rel="stylesheet/less" href="./assets/css/common.less" />
		<link rel="stylesheet/less" href="./assets/css/index.less" />
	</head>
	<body>
		<!-- 头部 -->
		<header class="header">
			<nav class="navbar navbar-inverse">
				<div class="container">
					<!-- 移动端导航栏 -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">
                           <img src="../hhhhhh/assets/images/Layabox-Laya家族7_03.png"></a>
						
					</div>
					<!-- 导航栏 -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
							<li><a href="family.html" class='wow fadeInDown ' data-wow-delay='0ms'>Laya家族</a></li>
							<li><a href="games.html" class='wow fadeInDown ' data-wow-delay='50ms'>游戏</a></li>
							<li><a href="news.html" class='wow fadeInDown ' data-wow-delay='100ms'>新闻动态</a></li>
							<li><a href="#" class='wow fadeInDown ' data-wow-delay='150ms'>开发者中心</a></li>
							<li><a href="#" class='wow fadeInDown ' data-wow-delay='200ms'>开发者社区</a></li>
							<li><a href="#" class='wow fadeInDown ' data-wow-delay='250ms'>开放平台</a></li>
							<li><a href="about.html" class='wow fadeInDown ' data-wow-delay='300ms'>关于我们</a></li>
						</ul>
						<ul class="nav navbar-nav navbar-right">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
									aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
        <div class="demo">
            <div class="conteiner key wow fadeInUp" data-wow-delay="200ms">
                <img src="../hhhhhh/assets/images/图层 3.png">
            </div>
        </div>

        
        <div class="demo2">
            <div class="con">
                <div class="yy">
                <div class="key key wow fadeInUp" data-wow-delay="200ms">
                    <div class="gg">LayaFlash引擎</div>
                    <h>让Flash技术变成开发HTML5产品的利器</h>
                 </div>
                <div class="jj">
                <div class="key2">
                   <div class="key2_1  wow fadeInUp" data-wow-delay="100ms"><img src="../hhhhhh/assets/images/Layabox-首页1_03.png"></div>
                   <div class="key3">
                       <ul>
                           <li class="wow fadeInUp" data-wow-delay="200ms">快速Flash产品转换</li>
                           <li class="wow fadeInUp" data-wow-delay="300ms">Flash页游\手游仅需1个人7天即可转换为HTML5和APP游戏</li>
                       </ul>
                   </div>
                </div>

                <div class="key4">
                    <div class="key4_1 wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-首页888_03.png" ></div>
                    <div class="key5">
                        <ul>
                            <li class="wow fadeInUp" data-wow-delay="300ms">LayaFlash IDE</li>
                            <li class="wow fadeInUp" data-wow-delay="400ms">支持代码编译、调试。 压缩与混滑加密、资源转换、在线文档等功能</li>
                        </ul>
                    </div>
                 </div>
                 <div class="key6">
                    <div class="key6_1 wow fadeInUp" data-wow-delay="100ms"><img src="../hhhhhh/assets/images/Layabox-首页999_03.png" ></div>
                    <div class="key7">
                        <ul>
                            <li class="wow fadeInUp" data-wow-delay="100ms">HTML5零学习成本</li>
                            <li class="wow fadeInUp" data-wow-delay="200ms">AS3开发者可直接使用Flash开源框架和工具链进行开发HTML5</li>
                        </ul>
                    </div>
                 </div>

                 <div class="key8">
                    <div class="key8_1 wow fadeInUp" data-wow-delay="100ms"><img src="../hhhhhh/assets/images/Layabox-首页1010_03.png" ></div>
                    <div class="key9">
                        <ul>
                            <li class="wow fadeInUp" data-wow-delay="100ms">性能媲美APP</li>
                            <li class="wow fadeInUp" data-wow-delay="200ms">Layalash引擎的重度游戏已运行QQ空间等平台。性能媲美APP</li>
                        </ul>
                    </div>
                    </div>
                 </div>
                </div> 
                <div class="key10 wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/图层 9.png"></div>
            </div>
        </div>

        <div class="demo3">
            <div class="conteiner">
               <div class="key1 wow fadeInUp" data-wow-delay="200ms">Layabox优势</div>
                <div class="key2">
                     <div class="key2_1 wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/图层 10.png"></div>
                        <div class="key2_2">
                        <ul>
                            <li class="wow fadeInUp" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-首页-恢复的_03.png"> <span>快速上手, Flash程序员3小时掌握HTML5开发</span> </li>
                            <li class="wow fadeInUp" data-wow-delay="300ms"><img src="../hhhhhh/assets/images/Layabox-首页-恢复的2_03.png"> <span>4年优化打磨, LayaPlayer运行器性能媲美APP</span> </li>
                            <li class="wow fadeInUp" data-wow-delay="400ms"><img src="../hhhhhh/assets/images/Layabox-首页-恢复的3_03.png"> <span>超5亿的LayaPlayer移动设备安装量帮助CP发行</span> </li>
                            <li class="wow fadeInUp" data-wow-delay="500ms"><img src="../hhhhhh/assets/images/Layabox-首页-恢复的4_03.png"><span>使用LayaFlash开发大型HTML 5游戏的企业超100家</span> </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

		<div class="product">
			<h2 class="wow fadeInUp" data-wow-delay="100ms">Layabox产品家族</h2>
			<div class="pbottom">
				</div>
				<div class="pcotentbox">
					<img class="wow fadeInUp" data-wow-delay="200ms"src="../hhhhhh/assets/images/图层 19.png" alt="">
					<div class="pcontent">
						<p class="wow fadeInUp" data-wow-delay="200ms">LayaAir</p>
						<p class="wow fadeInUp" data-wow-delay="200ms">核心库仅100K左右的新一代HTML5引擎，支
							持AS3\TS\JS语言开发，支持2D\3D，非运行
							器模式下性能媲美APP。</p>
					</div>
				</div>
				<div class="pcotentbox">
					<img class="wow fadeInUp" data-wow-delay="300ms" src="../hhhhhh/assets/images/图层 19.png" alt="">
					<div class="pcontent">
						<p class="wow fadeInUp" data-wow-delay="300ms">LayaAir</p>
						<p class="wow fadeInUp" data-wow-delay="300ms">核心库仅100K左右的新一代HTML5引擎，支
							持AS3\TS\JS语言开发，支持2D\3D，非运行
							器模式下性能媲美APP。</p>
					</div>
				</div>
				<div class="pcotentbox">
					<img class="wow fadeInUp" data-wow-delay="400ms" src="../hhhhhh/assets/images/图层 19.png" alt="">
					<div class="pcontent">
						<p class="wow fadeInUp" data-wow-delay="400ms">LayaAir</p>
						<p class="wow fadeInUp" data-wow-delay="400ms">核心库仅100K左右的新一代HTML5引擎，支
							持AS3\TS\JS语言开发，支持2D\3D，非运行
							器模式下性能媲美APP。</p>
					</div>
				</div>
				<div class="pcotentbox">
					<img class="wow fadeInUp" data-wow-delay="500ms"src="../hhhhhh/assets/images/图层 19.png" alt="">
					<div class="pcontent">
						<p class="wow fadeInUp" data-wow-delay="500ms">LayaAir</p>
						<p class="wow fadeInUp" data-wow-delay="500ms">核心库仅100K左右的新一代HTML5引擎，支
							持AS3\TS\JS语言开发，支持2D\3D，非运行
							器模式下性能媲美APP。</p>
					</div>
				</div>
				<div class="pcotentbox">
					<img class="wow fadeInUp" data-wow-delay="600ms" src="../hhhhhh/assets/images/图层 19.png" alt="">
					<div class="pcontent">
						<p class="wow fadeInUp" data-wow-delay="600ms">LayaAir</p>
						<p class="wow fadeInUp" data-wow-delay="600ms">核心库仅100K左右的新一代HTML5引擎，支
							持AS3\TS\JS语言开发，支持2D\3D，非运行
							器模式下性能媲美APP。</p>
					</div>
				</div>
			</div>
		</div>


        <div class="demo7">
            <div class="kk">
                <div class="k wow fadeInUp" data-wow-delay="200ms">
                采用Layabox引擎的精彩游戏</div>
                <div class="k2  wow fadeInUp" data-wow-delay="200ms">更多</div>
            </div>
            <div class="kk2">
                <div class="kk3">
                <div class="k3 wow fadeInUp" data-wow-delay="300ms"><img src="../hhhhhh/assets/images/图层 24.png"></div>
            </div>
                <div class="kk4 wow fadeInUp" data-wow-delay="400ms"">
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>
                    <div class=k4><img src="../hhhhhh/assets/images/图层 34.png"><p>三国</p></div>

        </div>
     </div>

        <div class="demo999">
            <div class="kkk wow fadeInUp" data-wow-delay="200ms"><form>合作伙伴</form><span>(排序不分先后)</span></div>
            <div class="kk999 wow fadeInUp" data-wow-delay="300ms">
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
                <div class="kk1"><img src="../hhhhhh/assets/images/图层 37.png"></div>
            </div>
            </div>



            <div class="demo13">
                <div class="coteiner">
                    <div class="nn">
                        <ul class="jj5">
                        <div class="jj wow fadeInUp" data-wow-delay="100ms">公司简介</div>
                        <div class="jj2 wow fadeInUp" data-wow-delay="200ms">联系方式</div>
                        <div class="jj3 wow fadeInUp" data-wow-delay="300ms">人才招聘</div>
                        </ul>
                        <div class="jj4 wow fadeInUp" data-wow-delay="400ms">All Copyright Reserved by Latabox Inc. 京ICP备15008153号-1</div>
                    </div>
                    <div class="nn2">
                        <div class="nn3  wow fadeInRightBig" data-wow-delay="100ms"><img src="../hhhhhh/assets/images/Layabox-Laya家族7777_01_03.png"></div>
                        <div class="nn4  wow fadeInRightBig" data-wow-delay="200ms"><img src="../hhhhhh/assets/images/Layabox-Laya家族8888_03.png"></div>
                        <div class="nn5  wow fadeInRightBig" data-wow-delay="300ms"><img src="../hhhhhh/assets/images/Layabox-Laya家族999_03.png"></div>
                    </div>
                </div>
            </div>
       
	

    </body>
    </html>
    <!-- 引入jquery -->
    <script src="./assets/js/jquery.min.js"></script>
    
    <!-- 引入bootstrap -->
    <script src="./assets/js/bootstrap.min.js"></script>
    
    <!-- 引入解析less的插件 -->
    <script src="./assets/js/less.min.js"></script>
    
    <!-- 引入懒加载的插件 -->
    <script src="./assets/js/wow.min.repeat.js"></script>
    
    <script>
        //懒加载初始化
        new WOW().init()
    
        //给页面绑定一个监听滚动条变化的事件
        $(document).scroll(function () {
            //获取到拉动一个距离
            var distance = $(this).scrollTop()
    
            //当前滚动条的值只要是大于10px 就给导航条添加背景色
            if (distance > 10) {
                $("#header").css({ "backgroundColor": "#111111", paddingBottom: 0 })
                $("#gotop").css({ zIndex: 99998, opacity: 1 })
            } else {
                //小于等于10
                $("#header").css({ 'backgroundColor': 'transparent', paddingBottom: '0em' })
                $("#gotop").css({ zIndex: -99998, opacity: 0 })
            }
        })
    
    
        //锚点的缓动效果 给特定链接元素 绑定点击事件
        $("#back a,.menu a,#banner a,.logo").click(function () {
            // console.log()
            //获取链接地址上面的路径部分(不包含域名)
            // location.pathname
            //replace 替换
            // 正则表达式 /^\// ^ 以....开始  \(转义) /
            // console.log(location.pathname) 系统的路径
            // console.log(location.pathname.replace(/^\//, '')) //系统替换的路径
            // this 你点击的是谁 他就是那个元素  点击 a元素 this == a 
            // console.log(this) //当前元素
            // console.log(this.pathname)  点击当前元素所跳转链接的路径
            // console.log(this.pathname.replace(/^\//, ''))  当前元素所跳转链接替换后的路径
    
            // console.log(location.hostname)  //系统获取域名部分
            // console.log(this.hostname)  //当前元素所跳转链接的域名部分
    
            //系统替换后的结果
            var LocationReplace = location.pathname.replace(/^\//, '')
            var CurrentReplace = this.pathname.replace(/^\//, '')
    
            //系统获取的域名部分
            var LocationHostname = location.hostname
            var CurrentHostname = this.hostname
    
            //true 真 结果一样 false 结果不一样
            // console.log(LocationReplace == CurrentReplace)
            // console.log(LocationHostname == CurrentHostname)
            // && 两个条件必须同时为真 才返回 true  否则false
            // console.log(true && false) //逻辑不短路 第一个为真 不代表第二个就为真 所以后面还要正常执行
            // console.log(false && false) //逻辑短路不执行
    
            //判断你跳转的链接 是不是在当前界面
    
            // http://www.baidu.com
            // http://www.baidu.com/#top 
            // http://www.taobao.com/#top 
    
            //你必须是跳转到当前界面的链接  才能做锚点
            if (LocationReplace == CurrentReplace && LocationHostname == CurrentHostname) {
                //获取将要跳转的锚点位置
                var $target = $(this.hash)
    
                //一定要当他找到锚点元素的时候，才跳转锚点
                if ($target.length > 0) {
                    //获取目标元素的位置
                    var pos = $target.offset().top
    
                    //让页面的body和html 滚动到 pos这个位置
                    $("html,body").animate({
                        //指的就是滚动条的距离
                        scrollTop: pos
                    }, 1000)
                }
    
                //阻止刷新界面
                return false
    
            }
    
    
    
        })
    
    
    
    </script>
	